 <template>
 <!-- <com1>xxx插槽xx</com1> -->
  <el-table
    :data="tableData"
    style="width: 100%">

    <el-table-column
      prop="date"
      label="日期-时间"
      width="180">
    </el-table-column>

    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>

    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>

    <el-table-column
      label="性别">
      <!-- prop="gender" -->
      <!-- 思路：用自定义的列模板来对数据进行格式化 -->
      <!-- 在插槽中，要获取当前行的数据 -->

       <!--
        1. slot-scope是固定写法(v-slot) 作用域插槽
        2. scope理解为变量，并不一定需要固定这个名字，el-table-column组件会自动将渲染本行需要的数据
        传给scope，其中scope.row就表示当前行的数据，它对应数据源中的某个对象。这里的row是固定写法

        -->
      <template v-slot="scope">
        <button @click="f(scope)">测试</button>
        <div>{{scope.row.gender ? '男' : '女'}}</div>
      </template>

    </el-table-column>

    <el-table-column label="操作">
        <el-button>删除</el-button>
    </el-table-column>

  </el-table>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        {
          companyName: '小米',
          companyLogo: 'http://s02.mifile.cn/assets/static/image/logo-mi2.png'
        },
        {
          companyName: '京东',
          companyLogo: 'https://misc.360buyimg.com/lib/img/e/logo-201305-b.png'
        },
        {
          companyName: '百度',
          companyLogo: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'
        }
      ]
      // tableData: [
      //   {
      //     date: '2016-05-02',
      //     name: '王铁柱',
      //     address: '上海市普陀区金沙江路 1518 弄',
      //     gender: 1
      //   },
      //   {
      //     date: '2016-05-04',
      //     name: '王小花',
      //     address: '上海市普陀区金沙江路 1517 弄',
      //     gender: 0
      //   }
      // ]
    }
  },
  methods: {
    f (score) {
      console.log(score)
    }
  }
}
</script>
